import React from 'react';
import { Form, Input, Button } from 'antd-mobile';
import { UserOutline, LockOutline } from 'antd-mobile-icons';
import useLogin from '../components/useLoging';

export default function Mlogin() {
  const { loading, login } = useLogin({ isMobile: true });

  const onFinish = (values) => {
    login(values);
  };

  return (
    <div style={{ padding: 32 }}>
      <Form
        layout="horizontal"
        onFinish={onFinish}
        footer={
          <Button block type="submit" color="primary" loading={loading}>
            登录
          </Button>
        }
      >
        <Form.Item
          name="username"
          rules={[{ required: true, message: '请输入用户名' }]}
        >
          <Input placeholder="用户名" clearable prefix={<UserOutline />} />
        </Form.Item>

        <Form.Item
          name="password"
          rules={[{ required: true, message: '请输入密码' }]}
        >
          <Input
            placeholder="密码"
            clearable
            type="password"
            prefix={<LockOutline />}
          />
        </Form.Item>
      </Form>
    </div>
  );
}